<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue-Axios分页</title>
	</head>
	<body>
		<div id="app">
					<h1 align="center">Axios分页</h1>
					<table align="center">
						<tr v-for="(user,index) in userList" v-if="index >= userIndex && index < (userIndex+rows)">
							<td v-text="user.id"></td>
							<td v-text="user.name"></td>
							<td v-text="user.age"></td>
							<td v-text="user.sex"></td>
						</tr>
						<tr>
							<td><button @click="pre">上一页</button></td>
							<td><button @click="next">下一页</button></td>
							<td colspan="2">每页条数:<input type="text" v-model.number.lazy="rows" /></td>
						</tr>
					</table>
				</div>
		
		<script src="../../vueDemo/js/vue.js"></script>
		<script src="../../vueDemo/js/axios.js"></script>
		<script>
			const APP = new Vue({
				el: "#app",
				data: {
					user: {
						id: '',
						name: '',
						age: '',
						sex: ''
					},
					userList: [],
					url: 'http://127.0.0.1:8090/axios/user',
					userIndex: 0,
					rows: 5
				},
				methods: {
					// async await
					async getUserList() {
						const {
							data: result
						} = await axios.get(this.url)
						this.userList = result
					},
					pre() {
						if (this.userIndex >= this.rows) {
							this.userIndex -= this.rows
						} else {
							this.userIndex = 0
						}
					},
					next() {
						if (this.userIndex + this.rows < this.userList.length) {
							this.userIndex += this.rows
						}
					}
				},
				mounted() {
					this.getUserList()
				}
			})
		</script>
	</body>
</html>
